<template lang="pug">
  .teacher
    .avatarBox
      el-avatar(:src="headUrl || DefaultImg" :size="52")
    h3.f18(v-if="name") {{name || '无'}}
    span.tag(v-if="tag") {{tag || '无'}}
</template>
<script>
import DefaultImg from '@/assets/teacher-man.png'

export default {
  props: {
    headUrl: {
      type: String,
      default: ''
    },
    name: {
      type: String,
      default: ''
    },
    tag: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      DefaultImg
    }
  }
}
</script>
<style lang="scss" scoped>
.teacher{
  display: flex;
  flex-direction: row;
  align-items: center;

  .avatarBox{
    border: 2px solid #fff;
    width: 56px;
    height: 56px;
    border-radius: 28px;
    display: inline-block;
    box-shadow: 1px 2px 4px 4px rgba(0, 0, 0 ,0.08);
  }

  > h3 {
    font-size: 17px;
    color: #333;
    margin-left: 20px;
  }

  > .tag{
    border: 1px solid #6E645A;
    margin-left: 10px;
    border-radius: 15px;
    font-size: 13px;
    height: 30px;
    line-height: 30px;
    padding: 0 20px;
    font-family: PingFang SC;
    color: #6E645A;
  }
}
</style>
